<script setup>
import {onMounted, reactive, ref} from "vue";
import temblorCarApply from "@/api/temblor/temblorCarApply.js";
import {Message} from "@arco-design/web-vue";
import {useUserStore} from "@/store/index.js";
// 审批id
const applyId = ref()
const userStore = useUserStore()
const user = userStore.user
const paginate = reactive({
  page: 1,
  limit: 10,
  total: 10,
  list: []
})
// 用车类型
const car_type = ref()
const columns = [
  {
    title: '申请人',
    dataIndex: 'apply_user.username',
  },
  {
    title: '用车时间',
    dataIndex: 'sn_time',
  },
  {
    title: '用车人数',
    dataIndex: 'number',
  },
  {
    title: '车辆类型',
    dataIndex: 'type',
  },
  {
    title: '用车地点',
    dataIndex: 'place',
  },
  {
    title: '用车事由',
    dataIndex: 'reason',
  },
  {
    title: '审批领导',
    dataIndex: 'leader.username'
  },
  {
    title: 'status',
    slotName: 'status'
  },
  {
    title: '用车类型',
    dataIndex: 'car_type',
  },
  {
    title: '综合部主任',
    dataIndex: 'general_manager.username'
  },
  {
    title: '操作',
    slotName: 'action'
  }
]
const visible = ref(false)
onMounted(() => {
  getList()
})
const getList = async () => {
  const res = await temblorCarApply.approvalPending({
    page: paginate.page,
    limit: paginate.limit
  })
  paginate.list = res.data.list
  paginate.total = res.data.total
  paginate.limit = res.data.limit
  paginate.page = res.data.page
}
const response = async (code) => {
  if (code === 200) {
    await getList()
    Message.success('处理成功')
  } else {
    Message.error('处理失败')
  }
}
const consent = async (id) => {
  const res = await temblorCarApply.editStatus({
    id: id,
    type: 1,
    status: 2
  })
  await response(res.code)

}
const refuse = async (id) => {
  const res = await temblorCarApply.editStatus({
    id: id,
    status: '0'
  })
  await response(res.code)
}
const changePage = (page) => {
  paginate.page = page
  getList()
}
const zhbsp = (id) => {
  applyId.value = id
  visible.value = true
}
const cancel = () => {
  applyId.value = ''
  visible.value = false
}
const submit = async () => {
  if (!car_type.value || !applyId.value) {
    Message.error('请选择用车类型')
    return;
  }
  const res = await temblorCarApply.editStatus({
    id: applyId.value,
    car_type: car_type.value,
    status: 3,
    type: 2
  })
  if (res.code === 200) {
    Message.success('处理成功')
    await getList()
    visible.value = false
  } else {
    Message.error('处理失败')
  }
}

</script>

<template>
  <a-card>
    <a-table :columns="columns" :data="paginate.list">
      <template #action="{record}">
        <a-space>
          <a-popconfirm v-if="record.status === 1 && record.leader.id == user.id" @ok="consent(record.id)"
                        content="确认同意?" type="success">
            <a-button type="primary" status="success">同意</a-button>
          </a-popconfirm>

          <a-button v-if="record.status === 2 && record.general_manager.id == user.id" @click="zhbsp(record.id)"
                    type="primary" status="success">
            同意
          </a-button>
          <a-button disabled v-else-if="record.status === 1">等待台长审核</a-button>


          <a-popconfirm v-if="record.status === 1" content="确认拒绝?" @ok="refuse(record.id)" type="error">
            <a-button type="primary" status="danger">拒绝</a-button>
          </a-popconfirm>
        </a-space>
      </template>
      <template #status="{record}">
        <a-tag color="blue" v-if="record.status === 1">待审核</a-tag>
        <a-tag color="orange" v-if="record.status === 2">台长审核通过</a-tag>
        <a-tag color="green" v-if="record.status === 3">综合部主任审核完毕</a-tag>
        <a-tag color="green" v-if="record.status === 4">使用完毕</a-tag>
        <a-tag color="red" v-if="record.status === 0">审核失败</a-tag>
      </template>
    </a-table>
    <a-pagination :total="paginate.total" :current="paginate.page" :page-size="paginate.limit" @change="changePage"
                  class="mt-3"/>
  </a-card>
  <a-modal v-model:visible="visible" @cancel="cancel" @ok="submit">
    <a-form-item label="用车类型">
      <a-select v-model="car_type">
        <a-option value="单位用车">单位用车</a-option>
        <a-option value="租车">租车</a-option>
      </a-select>
    </a-form-item>
  </a-modal>
</template>

<style scoped>

</style>